<template>
  <el-dialog title="选择课程" :visible.sync="isShow" @close="close">
    <el-table :data="list" :highlight-current-row="!checkbox" @current-change="handleCurrentChange" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" v-if="checkbox">
      </el-table-column>
      <el-table-column property="courseName" label="课程名称"></el-table-column>
      <el-table-column property="courseType" label="课程类型">
        <slot slot-scope="scope">
          {{courseType_map[scope.row.courseType].text}}
        </slot>
      </el-table-column>
      <el-table-column property="courseCateName" label="课程分类"></el-table-column>
      <el-table-column property="supplierName" label="所属供应商"></el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">{{$t('action.cancel')}}</el-button>
      <el-button type="primary" @click="close(returnData)">{{$t('action.comfirm')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {mapState} from "vuex";

  export default {
    name: "ChooseCourse",
    props:["checkbox"],
    data() {
      return {
        isShow:true,
        list: [],
        returnData:[],
      }
    },
    computed: {
      ...mapState({
        courseType_map: state => state.app.enumData.courseType_map
      })
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.$api.course.getCourseList().then(
          res => {
            this.list = res.data.list;
          }
        )
      },
      handleCurrentChange(val){
        this.returnData.push(val);
      },
      handleSelectionChange(val){
        this.returnData = [val];
      },
      close(data) {
        this.$emit("closePop", data)
      },
    },
  }
</script>

<style scoped>

</style>
